<template>
    <div class="pageWrap">
        <el-button size="mini" type="primary" @click="lotteryId='';luckVisible=true">添加抽奖</el-button>
        <el-table :data="luckList" style="width: 100%">
            <el-table-column prop="lotteryTitle" label="标题">
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
            </el-table-column>
            <el-table-column label="抽奖名单">
                <template slot-scope="scope">
                    <el-button size="mini" @click="seeMsg(scope.row,1)">抽奖人员名单</el-button>
                </template>
            </el-table-column>
            <el-table-column label="抽奖记录">
                <template slot-scope="scope">
                    <el-button size="mini" @click="seeMsg(scope.row,2)">抽奖记录</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="downCode(scope.$index, scope.row)">下载二维码</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="抽奖设置" width="90%" :visible.sync="luckVisible">
            <ldAdd luckType="F" :lotteryId="lotteryId" @onclose="luckVisible=false;getLotteryList()" />
        </el-dialog>
        <el-dialog title="抽奖名单" width="90%" :visible.sync="luckPerVisible">
            <ldPer :seePer="seePer" @onclose="luckPerVisible=false" />
        </el-dialog>
        <el-dialog title="抽奖记录" width="90%" :visible.sync="luckRecordVisible">
            <ldRecord :seeRecord="seeRecord" @onclose="luckRecordVisible=false" />
        </el-dialog>
    </div>
</template>

<script>
    import ldAdd from "./ldAdd.vue"
    import ldPer from "./luckPer.vue"
    import ldRecord from "./ldRecord.vue"
    export default {
        components: {
            ldAdd,
            ldPer,
            ldRecord
        },
        data() {
            return {
                luckList: [],
                luckVisible: false,
                lotteryId: '',
                luckPerVisible: false,
                seePer: '',
                luckRecordVisible: false,
                seeRecord: ''
            };
        },
        methods: {
            // 下载二维码
            downCode(index, row) {
                let u = "/guess/luck/luck?lId=" + row.id
                this.$axios.post('/sbr/getwxcode', {
                    path: u
                }).then(res => {
                    let base64 = res.data.data
                    var cvs = document.createElement("canvas");
                    cvs.width = 440
                    cvs.height = 440
                    cvs.style.display = "none";
                    var ctx = cvs.getContext("2d");
                    var img = document.createElement("img");
                    img.src = "data:image/png;base64," + base64
                    img.style.display = "none";
                    document.body.appendChild(img)
                    img.onload = function () {
                        ctx.drawImage(img, 20, 20, 400, 400);
                        console.log(111);
                        const imageData = ctx.getImageData(0, 0, 440, 440);
                        for (let i = 0; i < imageData.data.length; i += 4) {
                            // 当该像素是透明的，则设置成白色
                            if (imageData.data[i + 3] === 0) {
                                imageData.data[i] = 255;
                                imageData.data[i + 1] = 255;
                                imageData.data[i + 2] = 255;
                                imageData.data[i + 3] = 255;
                            }
                        }
                        ctx.putImageData(imageData, 0, 0);
                        let url = cvs.toDataURL("image/png"); //得到图片的base64编码数据
                        let a = document.createElement("a"); // 生成一个a元素
                        let event = new MouseEvent("click"); // 创建一个单击事件
                        a.download = "文章推广码.png"; // 设置图片名称
                        a.href = url; // 将生成的URL设置为a.href属性
                        a.dispatchEvent(event);
                    }
                })
            },
            // 获取账号下 有几个抽奖活动
            getLotteryList() {
                let orgId = this.$orgId;
                this.$axios.get('/sbr/guess/getLotteryList?orgId=' + orgId).then(res => {
                    let rr = res.data.data
                    rr.forEach(v => {
                        // console.log(new Date(v.startTime));
                        v.startTime = new Date(v.startTime).toLocaleString()
                        v.endTime = new Date(v.endTime).toLocaleString()
                    })
                    this.luckList = rr
                })
            },
            // 编辑 打开弹框
            handleEdit(index, row) {
                console.log(index, row);
                this.lotteryId = row.id
                this.luckVisible = true
            },
            // 删除
            handleDelete(index, row) {
                // console.log(index, row);
                this.$axios.get("/sbr/guess/deleteLottery?id=" + row.id).then(res => {
                    this.getLotteryList()
                })
            },
            seeMsg(row, i) {
                if (i == 1) {
                    this.seePer = row.id;
                    this.luckPerVisible = true
                } else if (i == 2) {
                    console.log(row.id);
                    this.seeRecord = row.id;
                    this.luckRecordVisible = true
                }
            }
        },
        mounted() {
            this.getLotteryList()
        }
    }
</script>
<style scoped>
    /* @import url(); 引入公共css类 */

    .pageWrap {
        margin: 10px auto;
        width: 95%;
    }
</style>